<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-if与v-show 条件渲染</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-if 是根据表达式的值的属性来有条件的渲染 -->
      <p v-if="show">第一段文字</p>
      <!-- v-else 接着v-if ，如果v-if不满足，则跳入到v-else，v-else为true -->
      <p v-else>第二段文字</p>
      <!-- v-else-if 接着v-if使用，如果v-if不满足，则跳入v-else-if ，但是要给条件判断 -->
      <p v-if="score>=90">优秀</p>  
      <p v-else-if="score>80">良好</p>
      <p v-else-if="score>70">中等</p>
      <p v-else-if="score>60">及格</p>
      <p v-else>不及格</p>

      <!-- 判断游览器的高和宽的比例可以判断用什么分辨率来进行一个展示 -->

      <!-- v-show指令和同样效果 -->
      <!-- 只有一次条件判断用v-if ，如果可能需要频繁渲染用v-show -->
      <p v-show="show">第一段文字</p>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        show:false,
        score:90
      }
    })
  </script>
</body>
</html>